<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			.i-like-it-flag-class{
				color: red;
			}
			/*toast信息提示*/
			.mui-toast-container {bottom: 50% !important;} 
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">名句</h1>
			<a class="mui-icon mui-icon-download mui-pull-right xq-header-bar-btn" id='save-sentence-card'></a>
			<a class="mui-icon mui-icon-star mui-pull-right xq-header-bar-btn" id='i-like-it'></a>
		</header>
		<div class="mui-content">
			<div class="xq-sentence-card-content" id="card-sentence-content">
				<div class="xq-sentence-card fixed-card actived-card" >
					<div fill-gushiwenid>
						<div class="main-pic xq-circle-img">
							<img id='card-main-img' crossorigin="anonymous" src='../images/card-little-bg004.png'/>
						</div>
						<div class="xq-sentence" show-name="name"></div>
					</div>
					<div class="xq-sentence-from" show-name="from"></div>
					<img id="card-bg-like-img" crossorigin="anonymous" src='../images/card-little-bg001.png' class="xq-bg-like"/>
				</div>
				
			</div>
		</div>
		<div style="display: none;">
			<div id="xq-sentence-card-tpl">
				<div class="xq-sentence-card fixed-card">
					<div fill-gushiwenid>
						<div class="main-pic xq-circle-img">
							<img id='card-main-img-hidden' crossorigin="anonymous" src='../images/card-little-bg004.png'/>
						</div>
						<div class="xq-sentence" show-name="name"></div>
					</div>
					<div class="xq-sentence-from" show-name="from"></div>
					<img id="card-bg-like-img-hidden" crossorigin="anonymous" src='../images/card-little-bg001.png' class="xq-bg-like"/>
				</div>
			</div>
		</div>
		<!-- <div><span id='refresh-sentence' class="xq-float-btn xq-circle-img mui-btn mui-icon mui-icon-reload"></span></div> -->
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/html2canvas.js"></script>
		<!-- <script src="../js/dom-to-image.js"></script> -->
		<script src="../js/commonUtils.js"></script>
		<script type="text/javascript">
			var currentSentence={};
			mui.init();
			mui.ready(function(e){
				if(mui.os.plus){
					return;
				}
				initSentenceCardPageInfo(null,null);
			});
			//
			mui.plusReady(function(e){
				var self = plus.webview.currentWebview();
				var infoId = self.infoId;//获得参数
				var sentence=self.sentence;
				if(sentence){
					currentSentence=$.parseJSON(sentence);
				}
				console.info('infoId='+infoId+';sentence='+sentence);
				initSentenceCardPageInfo(infoId,sentence);
			});
			
			//
			var cloneCardIdex=0;
			//
			function initSentenceCardPageInfo(infoId,sentence){
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("sentenceRandomCard");
				SettingInfoManager.setPageFontFromSetting();
				initElemsSize();
				//
				if(infoId){
					SettingInfoManager.addHistoryInfo(SettingInfoManager.settingName.historySentence,infoId);
				}
				var sentenceContentSel = '#card-sentence-content';
				if(sentence){
					//currentSentence=$.parseJSON(sentence);;
					fillSentenceToTpl(currentSentence);
				}else{
					loadSentence(infoId);
				}
				getImage('../images/card-little-bg004.png','card-main-img');
				getImage('../images/card-little-bg001.png','card-bg-like-img');
				getImage('../images/card-little-bg004.png','card-main-img-hidden');
				getImage('../images/card-little-bg001.png','card-bg-like-img-hidden');
				$(sentenceContentSel).on('tap','[fill-gushiwenid]',function(e){
					var gushiwenId=$(this).attr('fill-gushiwenid');
					console.info('gushiwenId='+gushiwenId)
					if(gushiwenId){
						mui.openWindowWithTitle({
							url:'gushiwenDetail.html?infoId='+gushiwenId,
							id:'gushiwenDetail.html-infoId-'+gushiwenId,
							extras:{
								infoId : gushiwenId
							}
						});
					}
				});
				$(".xq-sentence-card").on('swipeleft',function(e){
					//console.info('swipeleft to refresh');
					//xq-sentence-card
					if($('#card-sentence-content .xq-sentence-card').length>1){
						return;
					}
					moveOutSentenceCard();
					loadSentence();
				}); 
				//
				initILikeIt();
				$('#i-like-it').on('tap',function(e){
					toogleILikeIt();
				});
				$('#save-sentence-card').on('tap',function(e){
					//console.log("pic");
					commonUtils.showLoading("处理中",{maskBgColor:"transparent"});
					var ele=document.querySelector("#card-sentence-content .xq-sentence-card");
					var bgVal=$(ele).css('background-color');
					html2canvas(ele,{ useCORS: true,allowTaint: true,backgroundColor:bgVal}).then(canvas => {
					    commonUtils.showLoading("图像生成完成",{maskBgColor:"transparent"});
						var dataURL = canvas.toDataURL();
						var formtData=dateFormat(new Date(),'YYYYmmddHHMMSSsss');
						var fileName="senCard-"+formtData;
						commonUtils.showLoading("图像转码完成",{maskBgColor:"transparent"});
						commonUtils.baseImgFile(fileName,dataURL,100);
					});
					//不支持局部截图
					/* var width=$("#card-sentence-content").width();
					var height=$("#card-sentence-content").height();
					domtoimage.toJpeg(ele, {bgcolor:bgVal, quality: 1,width:width,height:(height+15),scale:2})
					    .then(function (dataURL) {
					        var formtData=dateFormat(new Date(),'YYYYmmddHHMMSSsss');
					        var fileName="senCard-"+formtData;
					        commonUtils.baseImgFile(fileName,dataURL,100);
					    }); */
				});
				
				
			}
			
			//
			function initElemsSize(){
				var winH=$(window).height();
				var sentenceCardContentH=winH-44;
				//var sentenceCardH=sentenceCardContentH-32;
				$('.xq-sentence-card-content').css('height',sentenceCardContentH+'px');
				//$('.xq-sentence-card').css('height',sentenceCardH+'px');
			}
			//移除卡片--带动画
			function moveOutSentenceCard(){
				var $activedCard = $('#card-sentence-content .actived-card');
				//$(activedCard).removeClass('actived-card').css('border','1px solid lightgray');
				var cloneCard=$("#xq-sentence-card-tpl .xq-sentence-card").clone(true);
				var $cloneCard=$(cloneCard);
				$cloneCard.addClass('actived-card');
				$activedCard.before($cloneCard);
				//
				$activedCard.css('left','-500px').css('right','500px');
				setTimeout(function(){
					$activedCard.remove();
				},700);
			}
			
			//
			function initILikeIt(){
				if(currentSentence && currentSentence.id){
					var list=SettingInfoManager.getList(SettingInfoManager.settingName.likeSentence);
					var index=$.inArray(currentSentence.id+'', list);
					console.log('initILikeIt:index='+index+';currentSentence.id='+currentSentence.id+';list='
					+JSON.stringify(list));
					var flagClass='i-like-it-flag-class'
					if(index>=0){
						$('#i-like-it').addClass(flagClass);
					}else{
						$('#i-like-it').removeClass(flagClass);
					}
				}
			}
			//
			function toogleILikeIt(){
				if(currentSentence && currentSentence.id){
					var flagClass='i-like-it-flag-class';
					if($('#i-like-it').is('.'+flagClass)){
						SettingInfoManager.removeFromList(SettingInfoManager.settingName.likeSentence,currentSentence.id);
						$('#i-like-it').removeClass(flagClass);
					}else{
						SettingInfoManager.addToList(SettingInfoManager.settingName.likeSentence,currentSentence.id,false);
						$('#i-like-it').addClass(flagClass);
					}
				}
			}
			
			function loadSentence(sentenceId) {
				var sencData={};
				var url = getShiciServiceHost() + '/shici/sentence/random';
				if(sentenceId){
					url = getShiciServiceHost() + '/shici/sentence/detail';
					sencData={id:sentenceId}
				}
				
				muiAjaxGetJsonData({
					url: url,
					data: sencData,
					callback: function(data) {
						if (!data.entry) {
							return;
						}
						SettingInfoManager.addHistoryInfo(SettingInfoManager.settingName.historySentence,data.entry.id);
						currentSentence=data.entry;
						initILikeIt();
						fillSentenceToTpl(currentSentence);
					}
				});
			}
			
			function fillSentenceToTpl(sentence){
				var willFillCentenceContentSel = '#card-sentence-content .actived-card';
				var sname =  sentence.name;
				var tmpArr=sname.split(/？|。|！|，/);
				console.info('tmpArr lenght='+tmpArr.length)
				var newLineName='';
				mui.each(tmpArr,function(index,item){
					newLineName+=item+'<br/>';
				})
				sentence.name=newLineName;
				fillDataToTpl($(willFillCentenceContentSel), sentence);
			}
			
			function getImage(url,imgId) {
				var xhr = new XMLHttpRequest();
				xhr.open('get', url, true);
				xhr.responseType = 'blob';
				xhr.onload = function () {
					if (this.status == 200) {
						document.getElementById(imgId).src =  URL.createObjectURL(this.response);
					}
				};
				xhr.send(null);
			}
		</script>
	</body>

</html>
